<%--
  Created by IntelliJ IDEA.
  User: Faine
  Date: 2022/3/12
  Time: 15:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<base href="<%=basePath %>" />
<html>
<head>
    <title>用户列表</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</head>
<body>


<div class="layui-row" >
    <div class="layui-col-md1" >
        <button id="addBtn" class="layui-btn" data-type="getCheckData" >新增</button>
    </div>
    <div class="layui-col-md2" >
        <input id="keyword" type="text" class="layui-input" />
    </div>
    <div class="layui-col-md9"  style="padding-left: 5px;" >
        <button id="searchBtn" class="layui-btn"  >搜索</button>
    </div>
</div>
<!--声明弹出框中的内容-->
<div id="addWin" style="display: none;padding-top: 5px;">
    <form id="pForm" class="layui-form" action="" lay-filter="testForm">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="hidden" name="id" />
                <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required  lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<table id="dataTable" lay-filter="test"></table>
<script>
    layui.use(['layer','form','table'], function(){
        var layer=layui.layer,
            form=layui.form,
            table = layui.table,
            $ = layui.jquery;

        //第一个实例
        table.render({
            elem: '#dataTable'
            ,url: 'user/listData.do' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:200, sort: true}
                ,{field: 'username', title: '用户名', width:200}
                ,{field: 'password', title: '密码'}
                ,{fixed:'right',title:'操作',toolbar:'#barDemo',width:150}
            ]]
        });
        //给新增按钮绑定单击事件
        $("#addBtn").bind("click",function () {
            //重置表单数据
            $("#pForm").get(0).reset();
            //弹出界面
            layer.open({
                type: 1,
                area: ['500px', '300px'],
                title:'新增用户',
                content: $('#addWin')
            })
        });
        //给搜索按钮绑定单击事件
        $("#searchBtn").bind("click",function () {
            //获取搜索框的值
            var keyword = $("#keyword").val();
            console.info("keyword",keyword);
            //重新加载表格数据
            table.reload('dataTable', {
                where: {
                    keyword:keyword
                } //设定异步数据接口的额外参数
                //,height: 300
            });
        });
        //自定义校验规则
        form.verify({
            username: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
            }

            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ],
            price:[
                /^\d{1,5}$/
                ,'价格必须需为数字'
            ]
        });
        //监听form的提交按钮的时件
        form.on('submit(formDemo)',function (data) {
            console.info(data);
            //往后台发送ajax请求 保存商品
            $.post("user/saveOrUpdate.do",data.field,function (data) {
                console.info(data);
                //如果操作成功
                if(data.success){
                    //关闭窗口
                    layer.closeAll();
                    //刷新数据
                    table.reload('dataTable');
                }else{
                    layer.msg(data.error);
                }
            })
            return false;
        })
        //监控表格的工具挑中的按钮的单击事件

        table.on('tool(test)', function(obj){
            console.info(obj);
            if(obj.event === 'edit'){
                //把弹窗打开
                layer.open({
                    type: 1,
                    area: ['500px', '300px'],
                    title:'修改用户',
                    content: $('#addWin')
                });
                //回显数据
                form.val("testForm",obj.data);
            } else if(obj.event === 'del'){
                layer.confirm('是否确认删除用户', {icon: 3, title:'提示'},function(index){
                    //往后台发送ajax请求 删除数据
                    $.post("user/delete.do",{id:obj.data.id},function (data) {
                        console.info(data);
                        if(data.success){
                            layer.close(index);
                            //刷新数据
                            table.reload('dataTable');
                        }else{
                            layer.msg(data.error);
                        }
                    })
                });
            }
        });

    });
</script>
</body>
</html>
